/*
 * This file contains all the HTML templates used to generate the content 
 * of the logger's page. Each <i>templates</i> are in fact a string where
 * some tokens will be replaced by concret values by the logger core
 * engine when creating the page's content.
 * 
 * Templates elements such ids and styles are defined in the constants.js
 * file in order to allow quick changes in theses elements without having
 * to modify the templates.
 */

/*
 * The ul.Templates namespace contains utility methods and constants to perform
 * template based layout for the universal logger.
 */
ul.Templates = function(){};

/**
 * Parses the template string and replace all tokens by the values passed as
 * arguments of this function. Tokens are defined with the character $ followed
 * by the index of the token in the arguments array of the function.
 * <p> 
 * For example,for <code>template = "$1 world $2"</code> we could have : 
 * </p> 
 * <code>Template.parse ( template, "hello", ":)" ); // return "hello world :)"</code>
 * 
 * <p>or</p>
 * 
 * <code>Template.parse ( template, "goodbye", ":(" ); // return "goodbye world :("</code>
 * 
 * @param 	{Object} template	the template string to parse
 * @param 	{Object} ...rest	value of replacement for this templates (1-based index)
 * @return	the template string filled with passed-in values
 */
ul.Templates.parse = function ( template )
{
	var a = arguments;

	return template.replace( /\$([0-9]+)/g ,function () { return a[ arguments[ 1 ] ]; } );
};

/*-----------------------------------------------------------------
 * 	CONCRET TEMPLATES
 *-----------------------------------------------------------------*/

/**
 * That template is used to create a new tab in the tab view. 
 * A tab is composed by three nested divs which have a specific
 * className. 
 * 
 * @param	$1  the id of the tab. 
 * @param	$2	the name of the tab
 */
ul.Templates.TAB = "<span class='" + CSS.TAB + "' id='" + ID.TAB + "$1'>"+
						"<span class='" + CSS.TAB_LEFT + "'>"+
							"<span class='" + CSS.TAB_RIGHT +"'>"+
								"<a href='#$2' onclick='focusTab( $1 );' class='" + CSS.TAB_TITLE + "'>$2</a>" + 
								"<a href='#$2-close' onclick=' closeTab( $1 );' title='Close the tab' alt='Close  the tab' class='" + CSS.TAB_CLOSE + "'>"+
									"<img src='../img/close-tab.png' alt='Close  the tab'/>"+
								"</a>" + 
							"</span>"+ 
						"</span>"+
					"</span>";

/**
 * That template is used to display a color string found in a log entry.
 * 
 * @param	$1  the complete color such #ffffff or 0xffffff
 * @param	$2  the hexadecimal prefix such # or 0x
 * @param	$3  the hexadecimal value such ffffff
 */ 
ul.Templates.COLOR = "<span class='" + CSS.COLOR + "' style='background-color:#$3;'>&nbsp;</span> $1";

/**
 * That template is used to display a link found in a log entry.
 * 
 * @param	$1  the url of the link such http://www.foo.com
 */
ul.Templates.URL = "<span class='" + CSS.LINK + "'>$1</span>";

/**
 * That template is used to display a log entry which is a string
 * 
 * @param	$1	the string content.
 */
ul.Templates.STRING = "<span class='" + CSS.STRING + "'>$1</span>";

/**
 * That template is used to display a mail found in a log entry.
 * 
 * @param	$1	the mail address such foo@foo.com
 */
ul.Templates.MAIL = "<span class='" + CSS.MAIL + "'>$1</span>";

/**
 * That template is used to display the whole log on screen.
 * A log is basically displayed as a table, where the first
 * column contains the controller for the details visibility.
 * The second column contains the formatted content of the log.
 * 
 * Notice that the whole details control cell trigger expand 
 * or collapse of the details div.
 * 
 * @param	$1 level of the log
 * @param	$2 content of the log, resulting of the formating
 * @param	$3 details of the log, resulting of the formating
 * @param	$4 log id
 */
ul.Templates.LOG = "<div class='$1' id='" + ID.LOG + "$4'>" +
						"<table class='" + CSS.LOG + "' cellpadding='0' cellspacing='0' border='0' width='100%'>" +
							"<tr>"+
								"<td class='" + CSS.LOG_CONTROL + "' "+
									"onclick='ul.Effects.toggle( \"" +ID.LOG_CONTROL + "$4\",\"" + ID.LOG_DETAILS + "$4\" );' " +
									"<span class='" + CSS.EXPANDABLE + "' id='" + ID.LOG_CONTROL + "$4'>&nbsp;</span>" +
								"</td>" +
								"<td class='" + CSS.LOG_CONTENT + "' width='100%'>" + 
									"<div class='" + CSS.LOG_MESSAGE +"'>$2</div>"+
									"<div class='" + CSS.LOG_INFO + " " + CSS.CLOSED + " "+
										"'id='" + ID.LOG_DETAILS + "$4'>$3</div>"+
								"</td>" +
							"</tr>"+
						"</table>" +
					"</div>";
								
/**
 * 
 * 
 * @param	$1	log level name 
 * @param	$2	date of the log 
 * @param	$3	optional details of the log
 */
ul.Templates.DETAILS = 	"<ul>" +
							"<li class='" + CSS.LOG_LEVEL + "'>$1</li>" +
							"<li class='" + CSS.LOG_DATE + "'>$2</li>"+
							"$3" +
						"</ul>";
									
/**
 * 
 * 
 * @param	$1	class in which the log was emit
 * @param	$2	function in which the log was emit
 * @param	$3	line at which the log was emit
 * @param	$4	file in which the log was emit
 */
ul.Templates.OPTIONNAL_DETAILS = "<li class='" + CSS.LOG_CALL + "'>In " +
									"<span class='" + CSS.CODE + "'>" +
									"<span class='" + CSS.CLASS + "'>$1</span>"+
									"<span class='" + CSS.FUNCTION + "'>$2()</span></span> at line " + 
									"<span class='" + CSS.LINE + "'>$3</span> in the file " + 
									"<span class='" + CSS.FILE + "'>$4</span>" + 
								"</li>";
/**
 * 
 * 
 * @param	$1	type
 * @param	$2	content		
 * @param	$3	id of the block
 */							
ul.Templates.XML = 	"<a	class='" + CSS.EXPANDABLE + "' href='#' " + 
					"id='" + ID.XML + "$3' " + 
					"onclick='ul.Effects.toggle( \"" + ID.XML + "$3\", \"" + ID.XML_CONTENT + "$3\" );'>$1</a>"+
					"<span class='" + CSS.CLOSED +"' id='" + ID.XML_CONTENT + "$3'>" +
					"<pre name='code' class='xml:nocontrols'>$2</pre></span>"; // display the coloured xml code
					//"<pre>$2</pre></span>"; // display the uncoloured xml code

/**
 * 
 *
 * @param	$1	capitalized language name 
 * @param	$2	language name
 * @param	$3	content	
 * @param	$4	id of the block
 */							
ul.Templates.SOURCE = 	"<a	class='" + CSS.EXPANDABLE + "'	 href='#' " + 
							"id='" + ID.SOURCE + "$4' " + 
							"onclick='ul.Effects.toggle( \"" + ID.SOURCE + "$4\", \"" + ID.SOURCE_CONTENT + "$4\" );'>$1</a>"+
						"<span class='" + CSS.CLOSED +"' id='" + ID.SOURCE_CONTENT + "$4'>" +
						"<pre name='code' class='$2:nocontrols'>$3</pre></span>"; // display the coloured source code
						//"<pre>$3</pre></span>"; // display the uncoloured source code

/**
 * 
 * 
 * @param	$1	type 
 * @param	$2	properties list
 * @param	$3	id
 */
ul.Templates.OBJECT = "<a class='" + CSS.EXPANDABLE + "' href='#' " + 
							"id='" + ID.OBJECT + "$3' " + 
							"onclick='ul.Effects.toggle( \"" + ID.OBJECT + "$3\", \"" + ID.OBJECT_PROPERTIES + "$3\" );'>$1</a>"+
						" {<table width='100%' class='" + CSS.PROPERTIES + " " + CSS.CLOSED +"' id='" + ID.OBJECT_PROPERTIES + "$3'>$2</table>}";

/**
 * Build a row of an array with two columns. The first column
 * contains the name of the property of the object, the second
 * column contains the content of the property, formatted according
 * to its type.
 * <p>
 * The width of the second columns is set to 100% to force the
 * first column to be as smaller as the longer property's name.
 * </p>
 * @param	$1	property name 
 * @param	$2	property value
 */
ul.Templates.PROPERTY = "<tr>"+
							"<td class='" + CSS.PROPERTY + "'>$1&nbsp;:</td>"+
							"<td width='100%'>$2</td>"+
						"</tr>";

/**
 * 
 * 
 * @param	$1	type 
 * @param	$2	entries list
 * @param	$3	id of the log 
 */
ul.Templates.ARRAY = 	"<a	class='" + CSS.EXPANDABLE + "' href='#' " + 
							"id='" + ID.ARRAY + "$3' " + 
							"onclick='ul.Effects.toggle( \"" + ID.ARRAY + "$3\", \"" + ID.ARRAY_ELEMENTS + "$3\" );'>$1</a>"+
						"<table class='" + CSS.ARRAY + " " + CSS.CLOSED +"' cellpadding='0' cellspacing='1' id='" + ID.ARRAY_ELEMENTS + "$3'>$2</table>";
							
/**
 * 
 * 
 * @param	$1	even or odd
 * @param	$2	entry index 
 * @param	$3	entry value 
 */
ul.Templates.ENTRY = "<tr class='$1'><td class='" + CSS.INDEX + "'>$2</td><td width='100%'>$3</td></tr>";


